<!doctype html>
<html lang="zh-CN">

<head>
    <title>绑定管理</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/left-controll.css">
    <link rel="stylesheet" href="./css/right-top.css">
    <link rel="stylesheet" href="./css/account.css">
    <style>
        #account-content>div {
            padding: 0 0 20px;
        }
        
        .bind-alipy {
            padding-top: 20px;
            padding-bottom: 0px;
        }
        
        .set-list .no-bind {
            color: #777;
        }
    </style>
</head>

<body>
    <div id='app' v-cloak>

        <!-- 解绑支付宝/银行卡 -->
        <div id='mask' v-if='closeBind'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='closeBind'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>解绑支付宝/银行卡</span>
                        <img class='hover' @click='closeBind=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='untying-wrap'>
                            <h5>支付宝号</h5>
                            <p>18875027096</p>
                            <p>是否解绑此微信号，可能会影响您的充值提现</p>
                            <div class='dis-spa'>
                                <button class='hover' @click='closeBind=false;'>取消</button>
                                <button class='hover'>确认绑定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 解绑支付宝/银行卡 -->

        <div class='dis-spa' style="align-items:flex-start;">

            <!-- 左边导航 -->
            <left-controll active='3'></left-controll>
            <!-- 左边导航 -->

            <!-- 右边类容 -->
            <div class='content-wrap-right' id='con-right'>

                <!-- 充值提现公告头部 -->
                <right-top ref='comHea'></right-top>
                <!-- 充值提现公告头部 -->

                <div id='account-content' class='dis-cen'>
                    <div>
                        <div>
                            <h4 class='ac-tit bind-alipy'>绑定支付宝</h4>
                            <div class='dis-spa set-list'>
                                <p class='dis-start'><span>支付宝账号</span><span class='no-bind'>暂无绑定支付宝账号</span></p>
                                <p class='dis-start'><span @click='closeBind=true;'>解绑</span><span @click='bindAlipy'>立即绑定</span><img src="./img/right.svg" style="width:18px;height:18px;"></p>
                            </div>
                        </div>
                        <div>
                            <h4 class='ac-tit'>绑定银行卡（最多5张）</h4>
                            <div class='dis-spa set-list'>
                                <p class='dis-start'><span>银行卡1</span><span>4545************12122</span><span class='no-bind'>（中国工商银行）</span></p>
                                <p class='dis-spa'>
                                    <span @click='closeBind=true;'>解绑</span>
                                    <span @click='bindBank'>更换邦定</span>
                                    <img src="./img/right.svg" style="width:18px;height:18px;">
                                </p>
                            </div>
                            <div class='dis-spa set-list'>
                                <p class='dis-start'><span>银行卡1</span><span>4545************12122</span><span class='no-bind'>（中国工商银行）</span></p>
                                <p class='dis-spa'>
                                    <span>解绑</span>
                                    <span>更换邦定</span>
                                    <img src="./img/right.svg" style="width:18px;height:18px;">
                                </p>
                            </div>
                            <div class='dis-spa set-list'>
                                <p class='dis-start'><span>银行卡1</span><span>4545************12122</span><span class='no-bind'>（中国工商银行）</span></p>
                                <p class='dis-spa'>
                                    <span>解绑</span>
                                    <span>更换邦定</span>
                                    <img src="./img/right.svg" style="width:18px;height:18px;">
                                </p>
                            </div>
                            <div class='dis-spa set-list'>
                                <p class='dis-start'><span>银行卡1</span><span>4545************12122</span><span class='no-bind'>（中国工商银行）</span></p>
                                <p class='dis-spa'>
                                    <span>解绑</span>
                                    <span>更换邦定</span>
                                    <img src="./img/right.svg" style="width:18px;height:18px;">
                                </p>
                            </div>
                            <div class='dis-spa set-list set-trans'>
                                <p class='dis-start'><span>银行卡5</span><span class='no-bind'>暂无绑定银行卡</span></p>
                                <p class='dis-spa'>
                                    <span>解绑</span>
                                    <span>更换邦定</span>
                                    <img src="./img/right.svg" style="width:18px;height:18px;">
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 右边类容 -->
        </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script src="./component/left-controll.js"></script>
    <script src="./component/right-top.js"></script>
    <script src="./component/bindBank.js"></script>
    <script src="./component/bindAlipay.js"></script>
    <script src="./js/el/index.js"></script>
    <script src='./js/jquery.min.js'></script>
    <script src="./js/jquery.mytooltip.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //控制解绑弹窗
                closeBind: false,
            },
            methods: {
                //充值/提现
                rech: function(tit) {
                    //直接跑去头部封装的组件把充值和提现索引传进去自己判断（因为这里的充值提现和头部里面的充值提现逻辑一摸一样）
                    this.$refs.comHea.rech(tit);
                },
                //更换/绑定支付宝
                bindAlipy: function() {
                    this.$refs.comHea.conType = 'zhifubao';
                    this.$refs.comHea.bind();
                },
                //更换/绑定银行卡
                bindBank: function() {
                    //更换和绑定都是一个样式 当是更换的时候 要把数据传进去在输入框中显示
                    this.$refs.comHea.conType = 'yinhang';
                    this.$refs.comHea.bind();
                }
            }
        });
    </script>

</body>

</html>